<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

*{
margin: 0;
padding: 0;

}

body{
margin:30px;
}

h3 {

    background-color: #fff300;
    color: white;
    text-align: center;
    padding: 3px;
    width: 100px;

}

.content {
	display: none;
}


ul {
	/* list-style: none; */
	list-style-type: none;
	border-top: 1px solid #fff300;
	width: 300px;
	line-height: 1.5em;
}

li {
	border-bottom: 1px solid gray;
	float:left;
}

a{
text-decoration: none;
color:gray;
position:relative;
}



li:hover .content{
	display: block;
	position: absolute;
/* 	left: 150px; */
/* 	top: 20px; */
	background-color:#71b7c6;
	width:400px;
	
}

.content .content-left{
	float:left;
	width:100px;
	
/* 	margin-right:30px; */
	padding:20px;
}

.content .content-right{
	float:left;
	width:180px;
}




</style>
</head>

<body>
<div >
	<h3>最新单曲</h3>
	<ul>
		<li>
			<a href="#">01&nbsp;爱的文身</a>
			<div class="content">
				<div class="content-left"><img width="100px" height="100px" src="images/mingxing1.jpg"></div>
				<div class="content-right">
					<dl>
						<dd><a href="http://www.sohu.com">歌手：李纹</a></dd>
						<dd>介绍：枫圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲</dd>
					</dl>				
				</div>
			</div>
		</li>
		<li>02&nbsp;爱的次身</li>
		<li>03&nbsp;爱的肉身</li>
	</ul>
</div>
</body>
</html>